<!--
 * @Author: coocase
 * @Date: 2021-03-25 10:03:06
 * @LastEditTime: 2021-05-13 13:31:37
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\index\tabs.vue
-->
<template>
    <div class="tabs">
        <Card :bordered="false">
            <Tabs value="recommend">
                <TabPane label="今日推荐" name="recommend" class="tab">
                    <Card
                        v-for="item of recommend"
                        :key="item.id"
                        class="tab-item"
                        :bordered="false"
                        @click.native="$toDetail(item.itemName)"
                    >
                        <div
                            class="item-img"
                            :style="{ 'background-color': item.imgUrl }"
                        ></div>
                        <p class="item-itemName">{{ item.itemName }}</p>
                        <p class="item-price">票价： ￥{{ item.minPrice }}</p>
                    </Card>
                </TabPane>

                <TabPane label="即将开售" name="willBeSale" class="tab">
                    <Card
                        v-for="item of willBeSale"
                        :key="item.id"
                        class="tab-item"
                        :bordered="false"
                        @click.native="$toDetail(item.itemName)"
                    >
                        <div
                            class="item-img"
                            :style="{ 'background-color': item.imgUrl }"
                        ></div>
                        <p class="item-itemName">{{ item.itemName }}</p>
                        <p class="item-price">票价： ￥{{ item.minPrice }}</p>
                    </Card>
                </TabPane>
            </Tabs>
        </Card>
    </div>
</template>

<script>
export default {
    name: "Tab",
    data() {
        return {
            recommend: this.recommend,
            willBeSale: this.willBeSale,
        };
    },
    methods: {
        getTabData: function () {
            this.$http
                .getRequest({
                    api: "tabs",
                    data: {},
                })
                .then((res) => {
                    // console.log(res)
                    this.willBeSale = res.willbesale;
                    this.recommend = res.recommend;
                    // console.log(this.willBeSale)
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        goDetail:function () {  
            this.$toDetail();
        }
    },
    mounted() {
        this.getTabData();
    },
};
</script>

<style scoped>
.ivu-card-head p {
    height: 80px;
}
.tabs {
    margin-bottom: 50px;
}
.tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tab-item:hover {
    cursor: pointer;
}
.item-img {
    width: 150px;
    height: 200px;
    border: none;
}
.item-itemName,
.item-price {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px;
    font-size: 12px;
}
</style>>

